<template>
	<view class="group">
		<view class="bcbmheader">
			<view class="invoice-search">
				<input v-model="keyword" placeholder="请输入部门名称" class="invoice-input" @confirm="onSearchGroupConfirm" />
				<uni-icons type="search" size="20" color="#bbb" class="invoice-icon"></uni-icons>
				<view class="invoice-btn" @click="onChangeGroup()">搜索</view>
			</view>
		</view>
		<view style="height: 85rpx;"></view>
		<view class="grouplist">
			<!-- 有密码 -->
<!-- 			<view class="groupcont" v-for="(item, index) in filteredList" :key="index" @click="groupBaocan(item)">
				{{ item.name }}<uni-icons type="arrow-right" color="#007aff" size="20" class="groupicon"></uni-icons>
			</view> -->
			<!-- 无密码 -->
			<view class="groupcont" v-for="(item, index) in filteredList" :key="index" @click="dialogSelectConfirm(item)">
				{{ item.name }}<uni-icons type="arrow-right" color="#007aff" size="20" class="groupicon"></uni-icons>
			</view>
		</view>

		<!-- <uni-popup ref="selectDialog" type="dialog" catchtouchmove="true">
			<uni-popup-dialog ref="selectClose" mode="base" :before-close="true" :title="title" @confirm="dialogSelectConfirm" @close="dialogSelectClose">
				<view class="groupform">
					<input v-model="password" placeholder="请输入部门密码" class="groupinp" />
				</view>
			</uni-popup-dialog>
		</uni-popup> -->

	</view>
</template>

<script>
	import {
		getTemporaryAll
	} from "@/proxy/food/food.api.js";
	export default {
		async onLoad() {
			await this.getTemporaryAllData();
		},
		data() {
			return {
				// title:"", // 报餐部门名称
				keyword: "",
				// password:"", // 输入的密码
				// confirmPassword:"", // 部门密码
				filteredList: [], // 筛选部门列表
				originalList: [], // 部门列表
			}
		},
		methods: {
			// 弹窗提示输入密码
			// groupBaocan(item) {
			// 	this.title = item.name;
				// this.confirmPassword = item.secretKey;
				// this.$refs.selectDialog.open();
				// console.log("弹窗提示输入密码", item)
			// },
			dialogSelectClose(){
				this.$refs.selectDialog.close();
			},
			// 校验是否为空的方法
			isEmpty(value) {
				return value === null || value === undefined || value === '';
			},
			// 输入密码确认
			dialogSelectConfirm(item){
				// if (this.isEmpty(this.password)) {
				// 	return this.$toast({
				// 		title: "密码不能为空",
				// 		icon: "error",
				// 	});
				// }else{
				// 	if(this.password !== this.confirmPassword){
				// 		return this.$toast({
				// 			title: "密码错误",
				// 			icon: "error",
				// 		});
				// 	}
				// }
				// console.log("密码通过")
				// this.password = "";
				// this.$refs.selectDialog.close();
				uni.navigateTo({
					url:`/pagesMeal/baocan/groupRecord?name=${item.name}`
				})
			},
			onChangeGroup() {
				if (this.keyword.trim() === '') {
					this.filteredList = this.originalList;
				} else {
					this.filteredList = this.originalList.filter(item =>
						item.name.toLowerCase().includes(this.keyword.toLowerCase())
					);
				}
			},
			onSearchGroupConfirm() {
				if (this.keyword.trim() === '') {
					this.filteredList = this.originalList;
				} else {
					this.filteredList = this.originalList.filter(item =>
						item.name.toLowerCase().includes(this.keyword.toLowerCase())
					);
				}
			},
			// 获取部门详情
			async getTemporaryAllData() {
				try {
					// 用户点击确认后执行的异步操作
					const result = await getTemporaryAll();
					if (result.code == 200) {
						this.filteredList = result.data;
						this.originalList = result.data;
						console.log("报餐部门结果", result);
					} else {
						this.$toast({
							title: result.data.msg,
						});
					}

				} catch (err) {
					this.$toast({
						icon: 'none',
						title: '发起失败，请联系管理员！',
						duration: 2000
					});
					console.log(err);
				}
			},
		}
	}
</script>

<style lang="scss">
	/* app端 */
	/* #ifdef APP-PLUS || H5 */
	#app,
	/* #endif */
	page {
		background-color: #F3F4F6;
	}
	
	
	.uni-dialog-title{
		padding-top: 10rpx !important;
	}
	
	.uni-popup-dialog{
		padding: 20rpx !important;
	}
	
	.uni-dialog-content{
		display: unset !important;
	}

	.group {
		padding: 0 20rpx;
		
		.bcbmheader {
			position: fixed;
			top: 0;
			left: 20rpx;
			right: 20rpx;
			z-index: 1;
		}
		.invoice-search {
			display: flex;
			align-content: center;
			// padding: 0rpx 20rpx;
			position: relative;
			background: #FFF;
			border: 1rpx solid #f1f1f1;
			flex: 1;
			border-radius: 10rpx;
			overflow: hidden;

			.invoice-input {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				// border-radius: 40rpx;
				padding-left: 60rpx;
				font-size: 27rpx;
			}

			.invoice-icon {
				position: absolute;
				left: 15rpx;
				top: 52%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
			}

			.invoice-btn {
				width: 125rpx;
				text-align: center;
				font-size: 28rpx;
				height: 80rpx;
				line-height: 80rpx;
				color: #fff;
				background: #2698fb;
			}
		}

		.grouplist {
			text-align: left;
			margin-top: 10rpx;
			font-size: 30rpx;
			background-color: #F3F4F6;

			.groupcont {
				// margin: 4rpx 0;
				border-bottom: 1rpx solid #eee;
				padding: 20rpx;
				background-color: #FFF;
				display: flex;
				align-items: center;

				.groupicon {
					// float: right;
					margin-left: auto;
					border: 1rpx solid #007aff;
					border-radius: 50%;
					height: 50rpx;
					width: 50rpx;
					text-align: center;
					line-height: 50rpx;
				}

				// &::after {
				//     content: "";
				//     display: block;
				//     clear: both;
				// }
			}
		}
		
		.groupform{
			font-size: 30rpx;
			.groupinp{
				height: 75rpx;
				border: 1rpx solid #eee;
				line-height: 75rpx;
				padding-left: 20rpx;
			}
		}

	}
</style>